<template>
  <div id="myplan">
    <div class="xunlianjihua" v-for="item in info" :key="">
      <router-Link to="/plandetail"><div class="jihua_picture" @click="get_planid(item.id)"><img class="jihua_picture_main" :src="item.picture" height="151" width="276"/></div></router-Link>
      <div class="jihuajieshao">
        <p class="name">{{item.name}}</p>
        <p class="jihua_tiaozhuan">{{item.biaoyu}}</p>
        <p><span>课时：{{item.week}}周</span><span>天/周：{{item.day_everyweek}}天</span></p>
        <div class="frequency">
          <p><span>强度：{{item.grade_level}}</span></p>
        </div>
      </div>
      <div class="shanchu">
        <el-button type="text" class="button" v-on:click='info.splice(index, 1)'>删除计划</el-button>
      </div>
    </div>




  </div>
</template>

<script>
  // import Page from "../personal/Page"
  export default {
    name:"Myplan",
    data(){
      return{
        info:{"img_url":require('../../img/训练计划1.png'),"name":"计划1","biaoyu":"标语1","week":"5","day":"5"},

      }
    },
    created() {
      var telephone=this.$store.state.telephone
      var this_=this
      this.$axios.get('http://127.0.0.1:8080/training/mytraining', {
        params: {
          telephone:telephone
        }
      })
        .then(function (response) {
          this_.info=response.data
          console.log(this_.info);
        })
        .catch(function (error) {
          console.log(error);
        });


    }
  }
</script>
<style scoped>
  #myplan{
    min-height: 520px;
  }
  a{
    color: black;
  }
  .xunlianjihua{

    padding-left: 10px;
    background: white;
    width: 990px;
    height: 160px;
    margin-bottom: 1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.3s;
  }
  .xunlianjihua:hover{
    box-shadow: 0px 0px 10px gray;

  }
  .xunlianjihua .jihua_picture{
    margin-top: 4px;
    width: 290px;
    height: 151px;
    float: left;
    margin-right: 10px;
    overflow: hidden;
  }
  .xunlianjihua .jihua_picture img{
    width:100%
  }
  .xunlianjihua .jihua_picture img:hover{

    transition: 1s;
    transform: scale(1.1);
  }
  .xunlianjihua .jihuajieshao{

    width: 230px;
    height: 160px;
    float: left;
  }

  .xunlianjihua .jihuajieshao .name{
    margin-top: 4px;
    font-size: 20px;
    width: 300px;
    font-family:Arial,Helvetica,sans-serif;
  }

  .jihua_tiaozhuan{
    width: 250px;
    font-size: 13px;
    height: 60px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .jihuajieshao p span{
    margin-right: 20px;

    font-family:Arial,Helvetica,sans-serif;
  }
  .frequency{
    margin-top: 10px;
  }
  .frequency img{
    box-sizing: border-box;
  }
  .shanchu{
    float: right;
    margin-right: 30px;
    margin-top: 110px;
  }
  .shanchu .button:hover{
    color: red;
  }
  .jihua_tiaozhuan{
    width: 650px;
  }
</style>
